<template>
  <div class="q-pa-md q-gutter-sm">
    <div @click="refresh">点击图片可更改</div>

    <t-img
      alt="我是图片"
      :src="url"
      imgSrc="https://resource.teld.cn/teldimage/107/82ed17ba7bf444a09a31a03761b38ac7.png"
      width="150px"
      height="150px"
      style="margin: 20px"
      :visible="true"
      :tabIndex="1"
      @error="onError"
      @click="
        () => {
          onClick();
          refresh();
        }
      "
      @load="onLoad"
    >
    </t-img>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    // 一开始是打不开的
    const url = ref('https://picsum.photos/500/300');

    return {
      url,
      refresh() {
        url.value = 'https://picsum.photos/500/300?t=' + Math.random();
      },
      onError(err) {
        console.log('======加载图片失败', err);
      },
      onClick() {
        console.log('======点击图片');
      },
      onLoad(url) {
        console.log('======加载图片成功', url);
      },
    };
  },
};
</script>
